
<%= form_with(model: [visualization, Issue.new], html: {
    class: 'inline-card-form',
    id: "grouping-#{grouping.id}-inline-issue-form",
    data: {
      'grouping-column-target': 'inlineCardForm',
      action: "keydown.esc->grouping-column#closeForm"
    }
  }) do |f| %>

  <div class="mb-2 w-full">
    <div data-controller='resizable-input' class="relative" >
      <div data-resizable-input-target="replica" class="break-all text-sm p-4 whitespace-pre-line"></div>

      <%= f.textarea :title,
        required: true,
        class: "border-2 border-primary focus:border-primary active:border-primary hover:border-primary bg-base-100 p-4 rounded-field text-sm w-full text-sm text-base-content absolute w-full left-0 top-0 right-0 bottom-0 ",
        "data-resizable-input-target": "input",
        "data-action": "keydown.enter->grouping-column#submitInlineForm",
        id: nil,
        'data-grouping-column-target': 'inlineCardFormTitle' %>
    </div>
  </div>

  <div class="flex items-stretch justify-end ">
    <%= hidden_field_tag :allocate_to_grouping_id, grouping.id, id: nil %>

    <a class="btn btn-square btn-sm" data-action="click->grouping-column#hideInlineCardForm">
      <i class="ti ti-x"></i>
    </a>

    <%= f.button class: "ml-1 btn btn-primary btn-sm" do %>
      <i class="ti ti-plus"></i> <%= t('actions.create') %>
    <% end %>

  </div>

<% end %>
